import { useEffect } from "react";
import { Avatar, Pagination, Tooltip, Table } from "antd";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh, IconEyeOpened } from "@douyinfe/semi-icons";
import { useModel, history } from "umi";
import { useReactive } from "ahooks";
import dayjs from "dayjs";
import Jdenticon from "react-jdenticon";
import { format } from "timeago.js";

import { FindAllPersons } from "../../_graphql/resources";

const { Column } = Table;

const AllPersons = () => {
    const { windowInnerHeight, graphqlFetchPlatform } = useModel("global");
    const { kuboUrl } = useModel("kubo");
    const { setCurrentPerson } = useModel("person.info");

    const state = useReactive({
        loading: false,
        persons: [],
        pageSize: 20,
        page: 1,
        totalCount: 0,
    });

    const loadPersons = async () => {
        state.loading = true;
        let res = await graphqlFetchPlatform({ query: FindAllPersons, variables: { first: state.pageSize, offset: (state.page - 1) * state.pageSize || 0 } });
        state.persons = res?.a?.nodes || [];
        state.totalCount = res?.a?.totalCount || 0;
        state.loading = false;
    };

    useEffect(() => {
        loadPersons();
    }, [state.page]);

    const renderTime = (_, r, i) => _ && formatUTCTime(_);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54 - 60;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>所有个人信息</span>}
                headerExtraContent={
                    <ButtonGroup>
                        <Button icon={<IconRefresh />} onClick={loadPersons}>
                            重新加载
                        </Button>
                    </ButtonGroup>
                }
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                bodyStyle={{ padding: 0, height: cardBodyHeight }}
                footerStyle={{ padding: 0 }}
                footerLine={true}
                footer={
                    <div style={{ padding: 14, display: "flex", justifyContent: "space-between" }}>
                        <div></div>
                        <Pagination
                            total={state.totalCount}
                            pageSize={state.pageSize}
                            position={["none", "bottomCenter"]}
                            hideOnSinglePage={false}
                            showSizeChanger={false}
                            showTotal={(total) => `总共：${total}条`}
                            onChange={async (page) => (state.page = page)}
                        />
                    </div>
                }
            >
                <Table loading={state.loading} dataSource={state.persons} bordered pagination={false} rowKey="uuid" scroll={{ y: cardBodyHeight - 55 }}>
                    <Column title="序号" align="center" width={75} render={(_, r, i) => i + 1 + (state.page - 1) * state.pageSize} />
                    <Column
                        title="UUID"
                        dataIndex="uuid"
                        width={80}
                        align="center"
                        render={(_) =>
                            _ && (
                                <Tooltip title={_}>
                                    <IconEyeOpened />
                                </Tooltip>
                            )
                        }
                    />
                    <Column
                        title="个人头像"
                        dataIndex="avatarHash"
                        width={100}
                        align="center"
                        render={(_, r) => <Avatar shape="square" src={kuboUrl && _ ? kuboUrl + _ : <Jdenticon size="24" value={r.realName} />} size={24} />}
                    />
                    <Column title="真实姓名" dataIndex="realName" align="left" />
                    <Column title="呢称" dataIndex="nickName" align="left" />
                    <Column title="性别" dataIndex="sex" align="center" width={80} />
                    <Column title="民族" dataIndex="nation" align="center" width={80} />
                    <Column title="创建时间" dataIndex="createdTime" width={160} align="center" render={renderTime} />
                    <Column title="更新时间" dataIndex="updatedTime" width={160} align="center" render={renderTime} />
                    <Column
                        title="操作"
                        width={160}
                        align="center"
                        render={(_, r) => {
                            return (
                                <a
                                    onClick={async () => {
                                        setCurrentPerson(r.uuid, r.realName);
                                        history.replace("/persons/baseinfo");
                                    }}
                                >
                                    查看详情
                                </a>
                            );
                        }}
                    />
                </Table>
            </SemiCard>
        </div>
    );
};

export default AllPersons;
